- Heart animation using CSS
Hello friends, Welcome to my Website "CodeWithMe". In this Website, my website is all about coding and I share that knowledge with you.
So friends,Today in this blog i will create a vibrating & animating heart shape using CSS pseudo selectors - before & after.
- Create a keyframe animation for heart beat
- scale the heart to bigger and smaller size using transform property at different intervals.
- Create a infinite animation on the container using the created keyframe.
In the first part, we learned how to draw heart shape using CSS3
Now let's see how to animate it to create a heartbeat animation.
- Create a keyframe animation for heart beat
- scale the heart to bigger and smaller size using transform property at different intervals.
- Create a infinite animation on the container using the created keyframe.
In the first part, we learned how to draw heart shape using CSS3
Now let's see how to animate it to create a heartbeat animation.
Creating CSS keyframes for animating heart
Inorder to give the heart throbbing effect, we scale the heart at different intervals. Its upto us to play around the intervals to get the desired effect.
Keep in mind, while drawing the heart shape, we have rotated the container with 45deg. We need to keep that in our keyframe transform, else the shape with be tilted during animation
Inorder to give the heart throbbing effect, we scale the heart at different intervals. Its upto us to play around the intervals to get the desired effect.
Keep in mind, while drawing the heart shape, we have rotated the container with 45deg. We need to keep that in our keyframe transform, else the shape with be tilted during animation
Add the keyframes to the Heart container
Here animation property accepts three values,
keyframes which we defined earlier animateHeart
is the animation-name
animation-duration
defines how long do we need to run each animation. If we define 2s, then each time it runs for 2sanimation-iteration-count
will run that many times. If we define it as infinite
, then it will run the animation infinitely after every X seconds which is defined in the animation-duration
column
Checkout the codepen for complete code along with the heart shape.
Here animation property accepts three values,
animation-duration
defines how long do we need to run each animation. If we define 2s, then each time it runs for 2sanimation-iteration-count
will run that many times. If we define it asinfinite
, then it will run the animation infinitely after every X seconds which is defined in theanimation-duration
column
animateHeart
is the animation-name
Checkout the codepen for complete code along with the heart shape.
--Download Source Code--
-html file-
-CSS file-
You also learn many programming languages such as C language, C++, Python & CSS etc. Please Subscribe my First YouTube channel, my motive behind creating this channel is to connect more and more with you.
Please do subscribe & press the bell icon of my channel if You like, learn & love this.